/**
 * 主题状态管理
 * 创建时间：2025-09-11
 * 作者：开发团队
 * 目的：管理系统主题切换和保存
 */

import { ref, computed, watch } from 'vue'
import { defineStore } from 'pinia'

export type ThemeMode = 'light' | 'dark'

export const useThemeStore = defineStore('theme', () => {
  // 状态定义
  const getValidTheme = (value: string | null): ThemeMode => {
    if (value === 'light' || value === 'dark') {
      return value
    }
    return 'light' // 默认主题
  }
  
  const theme = ref<ThemeMode>(
    getValidTheme(localStorage.getItem('theme'))
  )
  
  const isDark = computed(() => theme.value === 'dark')

  // 监听主题变化，更新HTML class
  watch(
    theme,
    (newTheme) => {
      const html = document.documentElement
      
      // 移除所有主题类
      html.classList.remove('light', 'dark')
      
      // 添加新主题类
      html.classList.add(newTheme)
      
      // 保存到本地存储
      localStorage.setItem('theme', newTheme)
    },
    { immediate: true }
  )

  // 动作方法
  
  /**
   * 切换主题
   */
  const toggleTheme = (): void => {
    theme.value = theme.value === 'light' ? 'dark' : 'light'
  }

  /**
   * 设置主题
   * :param newTheme: 新主题模式
   */
  const setTheme = (newTheme: ThemeMode): void => {
    theme.value = newTheme
  }

  /**
   * 初始化主题
   */
  const initTheme = (): void => {
    // 检查系统主题偏好
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
    
    // 如果没有保存的主题，使用系统偏好
    if (!localStorage.getItem('theme')) {
      theme.value = prefersDark ? 'dark' : 'light'
    }
  }

  return {
    // 状态
    theme,
    isDark,
    
    // 方法
    toggleTheme,
    setTheme,
    initTheme
  }
})